<template>
    <div class="sider-menu">
        <el-menu :default-active="activeIndex" @select="select">
            <el-menu-item :index="item.path" v-for="(item, index) in data" :key="index">
                <el-icon>
                    <setting />
                </el-icon>
                <span> {{ item?.meta?.title }}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { dynamicRoutes } from '@/router/router.config';
import {
    Setting,
} from '@element-plus/icons-vue';

const props = defineProps({
    data: {
        type: Array,
        default: () => [],
    },
});
const router = useRouter();
const activeIndex = ref(props.data[0]?.path);
watch(() => props.data, () => {
    activeIndex.value = props.data[0]?.path;
}, { immediate: true, deep: true });

const select = (index: string) => {
    router.push({ path: index });
};
</script>

<style lang="less" scoped></style>